import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
console.log(cityData['Zhejiang']);
class Demo extends Component {
    state = {
        province: provinceData[0],
        cities: cityData[provinceData[0]],
        secondCity: cityData[provinceData[0]][0],
    }
    handleChange = (selectedOption) => {
        this.setState({
            province: selectedOption.value,
            cities: cityData[selectedOption.value],
            secondCity: cityData[selectedOption.value][0],
        });
    }
    secondhandleChange = (selectedOption) => {
        this.setState({
            secondCity: selectedOption.value,
        });
    }
    render() {
        return (
            <div>
                <Select
                    name="form-field-name"
                    value={this.state.province}
                    onChange={this.handleChange}
                    options={provinceData.map(province => {return {value: province, label: province};})}
                />
                <Select
                    name="form-field-name"
                    value={this.state.secondCity}
                    onChange={this.secondhandleChange}
                    options={this.state.cities.map(city => {return {value: city, label: city};})}
                />
            </div>
        );
    }
}
export default Demo;